/**
 * Created by liubin on 2015/10/8.
 */
'use strict';

import React from 'react';
import { Link } from 'react-router';
import ReactMixin from 'react-mixin';
import { initialize } from 'redux-form';
import Autobind from 'tools/autobindMixin';
import RoleAddForm from 'forms/roleAddForm';

// func自动绑定
@ReactMixin.decorate(Autobind)
class RoleAdd extends React.Component {
    /**
     * 参数限制
     * @type {{roleActions: *, history: *}}
     */
    static propTypes = {
        roleActions: React.PropTypes.object,
        history: React.PropTypes.object.isRequired
    }

    /**
     * 提交成功后回调
     */
    submitCallback() {
        console.log('submitCallback');
        console.log(this);
        const { history } = this.props;
        // url跳转
        history.pushState(null, '/role/list');
    }

    /**
     * form提交事件
     * @param data
     */
    handleSubmit(data) {
        console.log(data);
        const { roleActions: { addRole } } = this.props;
        addRole(data, this.submitCallback);
    }

    /**
     * 返回按钮事件
     */
    handleBack() {
        const { history } = this.props;
        history.goBack();
    }

    /**
     * 控件初始化完成事件
     */
    componentDidMount() {
        const { dispatch } = this.props;
        // 让form控件的值初期化
        dispatch(initialize('roleAdd', {}));
    }
    render(){
        const props = {
            onSubmit: this.handleSubmit,
            handleBack: this.handleBack
        };
        return (
           <Grid>
                <Row>
                    <Col sm={12}>
                        <Breadcrumb>
                            <BLink><Link to='/'>主页</Link></BLink>
                            <BLink><Link to='/role'>权限</Link></BLink>
                            <BLink active>权限新增</BLink>
                        </Breadcrumb>
                    </Col>
                </Row>
               <Row>
                   <Col sm={12} md={9} lg={7}>
                       <PanelContainer plain className='plain-panel' controlStyles='bg-blue fg-white'>
                            <PanelHeader className='bg-blue fg-white'>
                                <Grid>
                                    <Row>
                                        <Col xs={12}>
                                            <h4>权限新增</h4>
                                        </Col>
                                    </Row>
                                </Grid>
                            </PanelHeader>
                            <PanelBody style={{paddingBottom: 10}}>
                                <Grid>
                                    <Row>
                                        <Col xs={12}>
                                            <RoleAddForm {...props}/>
                                        </Col>
                                    </Row>
                                </Grid>
                            </PanelBody>
                        </PanelContainer>
                   </Col>
               </Row>
           </Grid>
        );
    }
}
export default RoleAdd;
